<template>
  <section id="app">
<BookHeader @add="handler"></BookHeader>
<BookBody :list="list" @del="handleDel"></BookBody>
<BookFooter :list="list" @clear="handleClear"></BookFooter>
  </section>
</template>

<script>
import BookHeader from './components/HeaderBook.vue'
import BookBody from './components/BookBody.vue'
import BookFooter from './components/BookFooter.vue'
export default {
components:{
  BookHeader,
  BookBody,
  BookFooter
},
data(){
  return {
    list:JSON.parse(localStorage.getItem('list')) || [
      {id:1,name:'跑步'},
      {id:2,name:'睡觉'},
      {id:3,name:'吃饭'},
      {id:4,name:'玩手机'}
    ]
  }
},
watch:{
  list:{
  deep:true,
  handler(newValue){
localStorage.setItem('list',JSON.stringify(newValue))
  }
  }
},
methods:{
 handler(msg){
this.list.push({
  id:+new Date(),
  name:msg
})
 },
 handleDel(id){
this.list=this.list.filter(item=>item.id!==id)
 },
 handleClear(){
  this.list=[]
 }
}
}
</script>

<style>

</style>